import React, { Component } from 'react';
import { Tree } from 'antd';
import styles from './DTree.less';

class DTree extends Component {

  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      selectKey: '',
      expandedKeys: [],
    };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.datasource === this.props.datasource) {
      if (prevProps.selectKey !== this.props.selectKey) {
        this.updateSelect(this.props.datasource);
      }
      return;
    }
    this.buildTree(this.props.datasource);
  }

  componentWillUnmount() {
    clearTimeout();
  }

  onSelect = keys => {
    if (keys.length === 0) {
      return;
    }
    this.setState({
      selectKey: keys[0],
    });
    this.props.onSelect(keys[0]);
  };

  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
    });
  };

  updateSelect = datasource => {
    const treeData = [];
    treeData.push(this.buildChildren(datasource, 60));
    this.setState({
      treeData,
    });
  };

  loopChild = (datasource, expandedKeys) => {
    if (datasource.children && datasource.children.length > 0) {
      expandedKeys.push(datasource.children[0].key);
      return this.loopChild(datasource.children[0], expandedKeys);
    } else {
      return datasource.key;
    }
  };

  buildTree = datasource => {
    if (!datasource || datasource.length === 0) {
      return;
    }

    const expandedKeys = [].concat(datasource.key);
    let selectKey = datasource.key;
    if (datasource.children && datasource.children.length > 0) {
      selectKey = this.loopChild(datasource, expandedKeys);
    }
    this.setState({
      expandedKeys,
      selectKey,
    });

    setTimeout(() => {
      const treeData = [];
      treeData.push(this.buildChildren(datasource, 60));
      this.setState({
        treeData,
      });
    }, 100);
  };

  buildChildren = (data, width) => {
    const children = [];
    if (data && data.children && data.children.length > 0) {
      for (let child of data.children) {
        children.push(this.buildChildren(child, width + 25));
      }
    }

    return {
      title: <div
        style={{
          width: this.props.width - width,
          color: this.state.selectKey === data.key ? '#000' : '',
        }}
        className={styles['label']}>
        {children.length === 0 ?
          <img src={'/svgs/file.svg'} width={'16px'} style={{ marginRight: '5px' }} />
          : <img src={'/svgs/dir.svg'} width={'35px'} />}
        <div className={styles['title']}>{data.title}</div>
      </div>,
      key: data.key,
      selectable: children.length === 0,
      children,
    };
  };

  render() {
    const { className = '', width, height } = this.props;
    const { treeData, expandedKeys = [], selectKey } = this.state;

    return <div className={className} style={{ width: width, background: 'rgb(60,63,65)' }}>
      <Tree
        style={{
          width: '100%',
          height,
          color: '#fff',
          overflow: 'auto',
          background: 'rgb(60,63,65)',
          padding: 0,
        }}
        showIcon
        expandedKeys={expandedKeys}
        selectedKeys={[].concat(selectKey)}
        onSelect={this.onSelect}
        treeData={treeData}
        onExpand={this.onExpand}
      />
    </div>;
  }

}

export default DTree;
